<template>
  <div class="full-screen">
    <div class="login-top">
      <span>企业注册</span>
      <span>|</span>
      <span>联系客服</span>
    </div>
    <div class="login-main">
      <div class="login-main-logo">
        <div class="main-logo">
          <van-image
            round
            width="45"
            height="45"
            :src="require('../../../images/logo/logo_my.jpg')"
          />
        </div>
        <div class="main-logo-text">欢迎登录易购商城</div>
      </div>
      <div class="main-verification-code">
        <input type="text" />
      </div>
      <div class="send-code">
        <send-code />
      </div>
      <div class="main-tips">未注册的手机号码验证后自动注册</div>
      <div class="main-login-button">
        <div class="login-button" @click="goHome">登录</div>
      </div>
      <div class="login-mode">账号密码登录</div>
    </div>
    <div class="login-footer">
      <div class="other-login-mode">其他登录方式</div>
      <div class="other-login-image">
        <div class="login-mode-qq">
          <van-image
            width="33"
            height="33"
            :src="require('../../../images/logo/icon_qq.png')"
          />
        </div>
        <div class="login-mode-yi">
          <van-image
            width="33"
            height="33"
            :src="require('../../../images/logo/icon_epp.png')"
          />
        </div>
        <div class="login-mode-member">
          <van-image
            width="33"
            height="33"
            :src="require('../../../images/logo/icon_k.png')"
          />
        </div>
      </div>
      <div class="footer-agreement">
        <span>我同意</span>
        <span>《商城会员章程》</span>
        <span>《支付宝协议》</span>
      </div>
    </div>
  </div>
</template>
<script>
import sendCode from './sendCode'
export default {
  components: {
    sendCode,
  },
  data() {
    return {}
  },
  methods: {
    goHome() {
      this.$router.push('/home')
    },
  },
}
</script>
<style lang="less" scoped>
@import '../../../style/mixin';
.full-screen {
  .fullScreen();
}
.login-top {
  font-size: 0.512rem;
  color: #333;
  overflow: hidden;
  margin-top: 0.42666rem;
  padding-right: 0.42666rem;
  > span {
    float: right;
    font-weight: 600;
    padding-left: 0.21333rem;
  }
}
.login-main {
  width: 12.8rem;
  margin: 0 auto;
  margin-top: 1.70666rem;
  font-size: 0.768rem;
  color: #333;
  .login-main-logo {
    display: flex;
    .main-logo {
      width: 1.92rem;
      height: 1.92rem;
      margin-right: 0.85333rem;
    }
    .main-logo-text {
      line-height: 1.92rem;
    }
  }
  .main-verification-code {
    border-bottom: 1px solid #ddd;
    margin-top: 20px;
    overflow: hidden;
    > input {
      width: 100%;
      margin-bottom: 0.42666rem;
      font-size: 1.024rem;
    }
  }
  .send-code {
    margin-top: 0.59733rem;
    height: 2.56rem;
  }
  .main-tips {
    font-size: 0.512rem;
    color: #999;
  }
  .main-login-button {
    margin-top: 1.28rem;
    .login-button {
      height: 1.92rem;
      background-color: #ffcc00;
      border-radius: 0.34133rem;
      text-align: center;
      line-height: 1.92rem;
      font-weight: 600;
    }
  }
  .login-mode {
    text-align: center;
    margin-top: 1.28rem;
    font-size: 0.59733rem;
  }
}

.login-footer {
  width: 10.24rem;
  margin: 0 auto;
  margin-top: 30px;
  .other-login-mode {
    font-size: 0.512rem;
    color: #999;
    text-align: center;
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0.28rem;
      width: 3rem;
      border-bottom: 1px solid #ddd;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0.28rem;
      width: 3rem;
      border-bottom: 1px solid #ddd;
      right: 0;
    }
  }
  .other-login-image {
    display: flex;
    height: 1.408rem;
    margin-top: 0.85333rem;
    justify-content: space-between;
    > div {
      width: 1.408rem;
      height: 1.408rem;
    }
  }
  .footer-agreement {
    margin-top: 0.85333rem;
    font-size: 0.512rem;
    text-align: center;
    > span {
      &:nth-child(2) {
        color: #333;
        font-weight: 600;
      }
      &:nth-child(3) {
        color: #333;
        font-weight: 600;
      }
    }
  }
}
</style>
